<template>
	<view class="car_container">
		<!-- 购物车为空提示 -->
		<view class="not_car_tip" v-if="carIsNot">
			<image style="width: 100%;" src="../../static/car/empty_car.png" mode="widthFix"></image>
		</view>
		<!-- 商品列表 -->
		<uni-swipe-action>
			<uni-swipe-action-item 
				:right-options="options" 
				@click="(e)=>rightOpsHandle(e, item.goodsInfo)" 
				:auto-close="true"
				v-for="(item, index) of carListD" 
				:key="index"
				>
				<view class="goods_item" :class="{'goods_item_notFirst': index != 0}" > 
					<!-- 左侧选择radio -->
					<view class="goods_checkbox">
						<checkbox-group @change="(e) => ChangeCheckbox(e, index)">
							<checkbox style="transform:scale(0.7)" 
								:value="item.goodsInfo.goodsId" 
								:checked="item.selected"
								/>
						</checkbox-group>
					</view>
					<view class="goods_pic" @click="touchGoodsItem(item)">
						<image class="goods_pic_img" :src="baseUrl + item.goodsInfo.cover" mode="widthFix"></image>
					</view>
					<view class="goods_item_info" @click="touchGoodsItem(item)">
						<view class="goods_info_name_row">
							<view class="goods_info_name_text">
								{{ item.goodsInfo.goodsName }}
							</view>
							<!-- 数量 -->
							<view class="goods_info_number">
								x {{ item.number }}
							</view>
						</view>
						<view class="goods_info_specis">
							<!-- 规格列表 -->
							<view class="goods_info_speci_item" v-for="(item1, index1) of item.specifications" :key="index1">
								{{ item1.speciValue.specisValue }} &nbsp;
							</view>
						</view>
						<view class="goods_info_price">
							￥<span style="font-size: 18px;">{{ item.goodsInfo.price }}</span>
						</view>
					</view>
				</view>
			</uni-swipe-action-item>
		</uni-swipe-action>
		<!-- 底部结算框 -->
		<view class="count_money" v-if="!carIsNot">
			<view class="all_select">
				<checkbox-group @change="allSelectHandle">
					<checkbox style="transform:scale(0.7)" 
						:checked="allSelectFalg"
						/> <span style="position: relative; top: 2rpx;">全选</span>
				</checkbox-group>
			</view>
			<view class="total_countBtn">
				<view class="total_text">
					总计：<span style="color: red;">
							￥<span style="font-size: 16px;">{{ totalPrice }}</span>
						</span>
				</view>
				<view class="count_Btn">
					<button class="count_Btn_btn" @click="settleAccountHandle">结算</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onShow } from '@dcloudio/uni-app';

// 图片基础路径
let baseUrl = uni.$baseUrl

// 购物车列表
let carListD = ref([]);
// 商品项右滑显示文本
let options = [
	{
		text: '删除',
		style: {
			backgroundColor: '#dd524d'
		}
	}
];

// 购物车为空标识
let carIsNot = ref(false);
// 全选标识
let allSelectFalg = ref(true);
// 总价格
let totalPrice = ref(0);

onMounted(() => {
	// 获取购物车数据
	getCarD();
});

onShow(()=>{
	getCarD();
})

// 结算处理器
function settleAccountHandle(){
	// 判断选择商品数是否大于1
	let countTemp = 0;
	let selectedItem = {};
	for(let item of carListD.value){
		if(item.selected){
			countTemp += 1;
			selectedItem = item;
		}
	}
	
	// 选空提示
	if(countTemp == 0){
		uni.showToast({
			title: '请先选择商品',
			icon: "none"
		});
		return 1;
	}
	
	if(countTemp > 1){
		uni.showToast({
			title: '多商品同时下单暂不支持!',
			icon: "none"
		});
		return 1;
	}
	
	let addressE = {}
	if(uni.getStorageSync("address") != ""){
		addressE = JSON.stringify(uni.getStorageSync("address"));
	}
	
	// 封装订单信息
	let orderInfo = {
		goodsInfo: selectedItem.goodsInfo,
		address: addressE,
		specifications: selectedItem.specifications, // 选择的商品规格
		number: selectedItem.number,
		selectedCoupon: false
	}
	
	uni.setStorageSync("orderInfo", JSON.stringify(orderInfo));
	
	uni.navigateTo({
		url:"/subPkg1/confirm_order/confirm_order"
	})
}

// 处理右滑商品项按钮点击
function rightOpsHandle(e, goodsInfo){
	let finishD = [...carListD.value];
	// 遍历购物车列表，删除点击的商品项
	for(let i = 0; i < finishD.length; i++){
		if(finishD[i].goodsInfo.goodsId == goodsInfo.goodsId){
			finishD.splice(i, 1); // splice函数的返回值为删除后的元素
			break;
		}
	}
	
	if(finishD.length != 0){
		// 将删除后的数组存入storage，并重新获取购物车数据展示
		uni.setStorageSync("carList", JSON.stringify(finishD));
	}else{
		uni.removeStorageSync("carList");
	}

	getCarD();
}

// 点击商品项，跳转商品详情页面
function touchGoodsItem(item){
	uni.setStorageSync("goodsDetail", JSON.stringify(item.goodsInfo));
	uni.navigateTo({
		url:"/subPkg1/goods_detail/goods_detail"
	})
}

// 读取本地购物车数据
function getCarD() {
	carListD.value = [];
	
	// 取出本地存储的购物车信息
	if(uni.getStorageSync('carList') == ""){
		// 购物车为空
		carIsNot.value = true;
		carListD.value = []
		uni.$loadCarBadge();
		return 0;
	}
	
	if(JSON.parse(uni.getStorageSync("carList")).length == 0){
		carIsNot.value = true;
		carListD.value = []
		uni.$loadCarBadge();
		return 0;
	}
	carIsNot.value = false;
	carListD.value = JSON.parse(uni.getStorageSync('carList'));
	
	// 动态设置Tabbr徽标
	uni.$loadCarBadge();
	
	// 统计购物车商品信息
	countCarGoodsInfo();
	// console.log('购物车数据:', carListD.value);
}

// 全选/取消全选触发
function allSelectHandle(){
	let tempArr = [...carListD.value];
	
	let tempState = false;
	if(allSelectFalg.value){ // 是否全选状态，如果是全选状态，则全部取消全选
		tempState = false;
	}else{
		tempState = true;
	}
	
	for(let item of tempArr){
		item.selected = tempState;
	}
	
	// 将全选操作保存
	uni.setStorageSync("carList", JSON.stringify(tempArr));
	getCarD();
}

// 统计购物车商品数据信息
function countCarGoodsInfo(){
	// 检查是否全选 和 选择的商品总价格
	let tempCount = 0;
	let tempTotal = 0;
	for(let item of carListD.value){
		if(item.selected){
			tempCount += 1;
			tempTotal += item.goodsInfo.price;
		}
	}
	// 检查是否全选
	allSelectFalg.value = tempCount == carListD.value.length;
	totalPrice.value = tempTotal;
	
}

// 复选框选择处理器
function ChangeCheckbox(e, index){
	// 更改购物车中的选中值
	carListD.value[index].selected = !carListD.value[index].selected;
	uni.setStorageSync("carList", JSON.stringify(carListD.value));
	
	// 动态维护"全选" 和 "总价格计算"
	countCarGoodsInfo();
}
</script>

<style lang="scss">
.goods_item{
	display: flex;
	padding: 40rpx 0px;
	border-radius: 15rpx;
	background-color: #fff;
}

.goods_info_name_row{
	display: flex;
	justify-content: space-between;
	padding: 10rpx 0rpx;
}

.goods_info_name_text{
	font-weight: 600;
}

.goods_info_number{
	position: relative;
	right: 8rpx;
	font-size: 15px;
}

.goods_pic_img{
	width: 100%;
}

.goods_checkbox{
	width: 15%;
	display: flex;
	align-items: center;
	justify-content: center;
	// border: solid red 1px;
}

.goods_pic{
	width: 20%;
	display: flex;
	align-items: center;
}

.goods_item_info{
	width: 65%;
	padding: 0px 15rpx;
}

.goods_item_notFirst{
	margin-top: 20rpx;
	// border: solid red 1px;
}

.goods_info_name_text{
	width: 85%;
    white-space: nowrap;         /* 不换行 */
    overflow: hidden;           /* 隐藏超出部分 */
    text-overflow: ellipsis;    /* 省略号 */
}

.goods_info_price{
	color: red;
	padding: 10rpx 0px;
}

.goods_info_number{
	color: #313131;
}

.goods_info_specis{
	color: #313131;
	padding: 10rpx 0px;
}

.count_money{
	position: fixed;
	bottom: 0px;
	width: 100vw;
	// border: solid #ffa72b 1px;
	background-color: #fff;
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.all_select{
	width: 15%;
	display: flex;
	justify-content: center;
	color: #363636;
	font-size: 14px;
}

.total_countBtn{
	// border: solid red 1px;
	display: flex;
	position: relative;
	right: 20rpx;
}

.total_text{
	display: flex;
	align-items: center;
}

.count_Btn{
	display: flex;
	align-items: center;
}

.count_Btn_btn{
	background-color: #ffa135;
	color: white;
	width: 20vw;
	height: 94%;
}

.total_text{
	padding: 0px 30rpx;
	// border: solid red 1px;
	display: flex;
	align-items: center;
	font-size: 14px;
	color: #363636;
}


</style>
